<script setup lang="ts">
import { ref } from 'vue'

// 文章列表
const articles = [
  {
    id: 1,
    title: '人工智能在企业中的应用',
    summary: '探讨人工智能如何改变企业运营模式，提升效率与创新能力。',
    author: '张明',
    date: '2024-03-15',
    category: '技术趋势',
    tags: ['AI', '企业应用', '数字化转型'],
    content: `
      <h2>人工智能在企业中的应用</h2>
      <p>随着人工智能技术的快速发展，越来越多的企业开始将 AI 技术应用到日常运营中。本文将探讨 AI 在企业中的主要应用场景和带来的变革。</p>

      <h3>1. 智能客服</h3>
      <p>AI 驱动的智能客服系统可以 24/7 全天候为客户提供服务，大大提升了客户服务效率。通过自然语言处理技术，系统能够理解客户需求并提供准确的解答。</p>

      <h3>2. 数据分析</h3>
      <p>AI 可以帮助企业从海量数据中挖掘有价值的信息，为决策提供支持。通过机器学习算法，企业可以预测市场趋势，优化运营策略。</p>

      <h3>3. 流程自动化</h3>
      <p>RPA（机器人流程自动化）技术可以自动执行重复性工作，提高工作效率，降低人力成本。</p>

      <h3>4. 智能营销</h3>
      <p>AI 可以分析用户行为，提供个性化推荐，优化营销策略，提高转化率。</p>

      <h3>结语</h3>
      <p>人工智能正在深刻改变企业的运营模式，企业需要积极拥抱 AI 技术，才能在数字化时代保持竞争力。</p>
    `
  },
  {
    id: 2,
    title: '大语言模型的发展与应用',
    summary: '深入解析大语言模型的技术原理和实际应用场景。',
    author: '李华',
    date: '2024-03-10',
    category: 'AI 技术',
    tags: ['大语言模型', 'NLP', '深度学习'],
    content: `
      <h2>大语言模型的发展与应用</h2>
      <p>大语言模型（LLM）是近年来人工智能领域最重要的突破之一。本文将介绍大语言模型的发展历程和主要应用。</p>

      <h3>1. 技术演进</h3>
      <p>从早期的统计语言模型，到基于神经网络的模型，再到如今的 Transformer 架构，大语言模型经历了快速的发展。</p>

      <h3>2. 主要特点</h3>
      <p>大语言模型具有强大的自然语言理解和生成能力，可以完成文本摘要、翻译、问答等多种任务。</p>

      <h3>3. 应用场景</h3>
      <p>大语言模型在客服、教育、医疗、法律等多个领域都有广泛的应用。</p>

      <h3>4. 未来展望</h3>
      <p>随着技术的不断进步，大语言模型将在更多领域发挥重要作用，推动人工智能的发展。</p>
    `
  },
  {
    id: 3,
    title: '企业知识库建设指南',
    summary: '如何构建高效的企业知识库，提升团队协作效率。',
    author: '王芳',
    date: '2024-03-05',
    category: '最佳实践',
    tags: ['知识管理', '团队协作', '效率提升'],
    content: `
      <h2>企业知识库建设指南</h2>
      <p>企业知识库是团队协作和知识管理的重要工具。本文将分享构建高效知识库的关键要素。</p>

      <h3>1. 知识库规划</h3>
      <p>明确知识库的目标、范围和结构，制定合理的分类体系。</p>

      <h3>2. 内容管理</h3>
      <p>建立内容更新机制，确保知识的准确性和时效性。</p>

      <h3>3. 用户培训</h3>
      <p>提供必要的培训，帮助团队成员更好地使用知识库。</p>

      <h3>4. 持续优化</h3>
      <p>根据用户反馈不断改进知识库，提升使用体验。</p>
    `
  }
]

// 当前选中的文章
const currentArticle = ref(articles[0])

// 文章分类
const categories = [
  { id: 'all', name: '全部' },
  { id: 'tech', name: '技术趋势' },
  { id: 'ai', name: 'AI 技术' },
  { id: 'practice', name: '最佳实践' }
]

// 当前选中的分类
const currentCategory = ref('all')

// 切换文章
const switchArticle = (article: any) => {
  currentArticle.value = article
}

// 切换分类
const switchCategory = (categoryId: string) => {
  currentCategory.value = categoryId
}

// 获取当前分类的文章列表
const filteredArticles = computed(() => {
  if (currentCategory.value === 'all') {
    return articles
  }
  return articles.filter(article => article.category === currentCategory.value)
})
</script>

<template>
  <div class="blog">
    <!-- 博客头部 -->
    <section class="blog-header">
      <div class="container">
        <h1>博客</h1>
        <p>探索 AI 技术前沿，分享最佳实践</p>
      </div>
    </section>

    <div class="container">
      <div class="blog-content">
        <!-- 文章列表 -->
        <aside class="blog-sidebar">
          <div class="category-filter">
            <h3>分类</h3>
            <div class="category-list">
              <div
                v-for="category in categories"
                :key="category.id"
                :class="['category-item', { active: currentCategory === category.id }]"
                @click="switchCategory(category.id)"
              >
                {{ category.name }}
              </div>
            </div>
          </div>

          <div class="article-list">
            <h3>文章列表</h3>
            <div
              v-for="article in filteredArticles"
              :key="article.id"
              :class="['article-item', { active: currentArticle === article }]"
              @click="switchArticle(article)"
            >
              <h4>{{ article.title }}</h4>
              <p class="article-meta">
                <span>{{ article.author }}</span>
                <span>{{ article.date }}</span>
              </p>
              <p class="article-summary">{{ article.summary }}</p>
              <div class="article-tags">
                <span v-for="tag in article.tags" :key="tag" class="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </aside>

        <!-- 文章内容 -->
        <main class="blog-main">
          <article class="article-content">
            <header class="article-header">
              <h2>{{ currentArticle.title }}</h2>
              <div class="article-meta">
                <span class="author">{{ currentArticle.author }}</span>
                <span class="date">{{ currentArticle.date }}</span>
                <span class="category">{{ currentArticle.category }}</span>
              </div>
              <div class="article-tags">
                <span v-for="tag in currentArticle.tags" :key="tag" class="tag">
                  {{ tag }}
                </span>
              </div>
            </header>
            <div class="article-body" v-html="currentArticle.content"></div>
          </article>
        </main>
      </div>
    </div>
  </div>
</template>

<style scoped>
.blog {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 博客头部样式 */
.blog-header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.blog-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.blog-header p {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* 博客内容样式 */
.blog-content {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 2rem;
  padding: 2rem 0;
}

/* 侧边栏样式 */
.blog-sidebar {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.category-filter {
  margin-bottom: 2rem;
}

.category-filter h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-item {
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-item:hover {
  background: #e9ecef;
}

.category-item.active {
  background: #007bff;
  color: white;
}

.article-list h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
}

.article-item {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}

.article-item:last-child {
  border-bottom: none;
}

.article-item:hover {
  background: #f8f9fa;
}

.article-item.active {
  background: #e9ecef;
}

.article-item h4 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.article-meta {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.article-meta span {
  margin-right: 1rem;
}

.article-summary {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.25rem 0.75rem;
  background: #e9ecef;
  border-radius: 15px;
  font-size: 0.75rem;
  color: #666;
}

/* 文章主体样式 */
.blog-main {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.article-header {
  margin-bottom: 2rem;
}

.article-header h2 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
}

.article-body {
  color: #333;
  line-height: 1.8;
}

.article-body h2 {
  font-size: 1.75rem;
  color: #333;
  margin: 2rem 0 1rem;
}

.article-body h3 {
  font-size: 1.5rem;
  color: #333;
  margin: 1.5rem 0 1rem;
}

.article-body p {
  margin-bottom: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .blog-header {
    padding: 4rem 0;
  }

  .blog-header h1 {
    font-size: 2.5rem;
  }

  .blog-content {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: sticky;
    top: 1rem;
  }
}
</style> 